<template>
  <div>
    <div>
      <!--      <el-date-picker placeholder="开始时间" style="margin-right: 15px" v-model="startdate">大幅度发</el-date-picker>-->
      <!--      <el-date-picker placeholder="结束时间" style="margin-right: 15px" model="enddate">大幅度发</el-date-picker>-->
      <!--      <el-input placeholder="时间间隔" style="margin-right: 15px; width: 200px"></el-input>-->
      <div class="block" style="margin: 10px 0">

        <el-date-picker style="width: 500px; margin-right: 20px"
                        v-model="value_date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>

        <el-select v-model="s_val" placeholder="请选择" style=" margin-right: 20px">
          <el-option
              v-for="item in options_single"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <!--        <el-input v-model="jh" style="width: 200px; margin-right: 20px" placeholder="井号"></el-input>-->
        <el-button type="primary" @click="getAll">查询</el-button>
      </div>

    </div>
    <div id="father">

      <div v-for="item in q2sbbmlist">
<!--        <div> {{ item.zkname }}</div>-->
        <div :id="item.sbbm"
             style="display: block; width: 1600px; height: 300px; background-color: #fbfdff;"></div>
      </div>
      <div v-for="item in q3sbbmlist">
<!--        <div> {{ item.zkname }}</div>-->
        <div :id="item.sbbm"
             style="display: block; width: 1600px; height: 300px; background-color: #fbfdff;"></div>
      </div>
      <!--      <div id="slave" style="display: block; width: 1600px; height: 300px; background-color: #42b983"></div>-->
    </div>

  </div>

</template>

<script>
import * as echarts from 'echarts';
import service from "@/utils/request";
import ElementUI from "element-ui";
import {formatDateTime} from '@/utils/formatDateTime'

export default {
  data() {
    return {
      chart_option: {
        title: {
          text: ''

        },
        // 用dataset设置
        dataset: {
          // dimensions: [{name: 'empno', type: 'number' }, {name: 'ename' },{name: 'job' },{name: 'mgr' },{name: 'hiredate' },{name: 'sal',type: 'number' }],
          // dimensions: [ 'empno', 'ename' , 'job' ,'mgr', 'hiredate','sal', 'comm', 'deptno'],
          source: [
            // ['2020-02-01 10:10:10',100],
            // ['2020-02-01 10:12:10',20],
          ]

        },
        xAxis: {
          type: 'time',
          name: '采集时间',
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
          }

        },
        yAxis: {
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{value}Mpa',
          }
        },


        series: [
          {
            type: 'line',
            encode: {
              x: 'cjsj',
              y: 'yl'
            },
            // label: {
            //   show: true,
            // },
            // emphasis: {
            //   label: {
            //     show: true
            //   }
            // }
          }
        ]
      },
      options_single: [{
        value: '1',
        label: '1分钟'
      }, {
        value: '5',
        label: '5分钟'
      }, {
        value: '30',
        label: '30分钟'
      }, {
        value: '60',
        label: '1小时'
      }, {
        value: '120',
        label: '2小时'
      }],

      s_val: '1',
      // sbbm: 'W12JLZ_HSFZ',
      q2sbbmlist: [
        {zkname: '卫12号计量站', sbbm: 'W12JLZ_HSFZ'},
        {zkname: '卫14号计量站', sbbm: 'W14JLZ_HSFZ'},
        {zkname: '卫21号计量站', sbbm: 'W21JLZ_HSFZ'},
        {zkname: '卫25号计量站', sbbm: 'W25JLZ_HSFZ'},
        {zkname: '卫30号计量站', sbbm: 'W30JLZ_HSFZ'},
        {zkname: '卫31号计量站', sbbm: 'W31JLZ_HSFZ'},
        {zkname: '卫7号计量站', sbbm: 'W7JLZ_HSFZ'},
        {zkname: '卫8号计量站', sbbm: 'W8JLZ_HSFZ'}],
      q3sbbmlist: [
        // {zkname: '卫12号计量站', sbbm: 'W12JLZ_HSFZ'},
        // {zkname: '卫14号计量站', sbbm: 'W14JLZ_HSFZ'},
        // {zkname: '卫21号计量站', sbbm: 'W21JLZ_HSFZ'},
        // {zkname: '卫25号计量站', sbbm: 'W25JLZ_HSFZ'},
        // {zkname: '卫30号计量站', sbbm: 'W30JLZ_HSFZ'},
        // {zkname: '卫31号计量站', sbbm: 'W31JLZ_HSFZ'},
        // {zkname: '卫7号计量站', sbbm: 'W7JLZ_HSFZ'},
        // {zkname: '卫8号计量站', sbbm: 'W8JLZ_HSFZ'}
      ],
      user: 'master',
      startdate: new Date(),
      enddate: new Date(),
      value_date: [formatDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss'), formatDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss')],
      // interval: 1
    }

  },
  methods: {

    showChart(jlz) {
      var chartDom = document.getElementById(jlz.sbbm);
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom);
      // chart_option
      this.chart_option.yAxis.name = '压力'
      this.chart_option.yAxis.axisLabel.formatter = '{value}Mpa'
      this.chart_option.series[0].encode =
          {
            x: 'cjsj', y: 'yl'
          }
      this.chart_option.title.text = jlz.zkname
      myChart.setOption(this.chart_option);
    },
    getAll() {
      for (let i = 0; i < this.q2sbbmlist.length; i++) {
        this.getq2data(this.q2sbbmlist[i]);
      }
      for (let i = 0; i < this.q3sbbmlist.length; i++) {
        this.getq3data(this.q3sbbmlist[i]);
      }
    },

    getq3data(jlz) {
      service({
        url: '/qx/q3list',
        method: 'get',
        params: {
          startdate: this.value_date[0],
          enddate: this.value_date[1],
          interval: this.s_val,
          sbbm: jlz.sbbm
        },
      }).then(response => {
        if (response.data.code !== 20000) {
          ElementUI.Message({
            message: response.data.message,
            type: 'warning'
          })
          return;
        }
        this.chart_option.dataset.source = response.data.data
        // console.log(response)
        // console.log(this.chart_option.dataset.source)
        //处理655.35值,将高于100mpa的值替换为'_'
        if (response.data.data === null)
          return;
        response.data.data.forEach(v => {
          if (v.yl > 100) {
            v.yl = '_'
          }
        })
        // myChart.setOption(this.chart_option);
        this.showChart(jlz)
      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })
      // console.log(option)
    },
    getq2data(jlz) {
      service({
        url: '/qx/q2list',
        method: 'get',
        params: {
          startdate: this.value_date[0],
          enddate: this.value_date[1],
          interval: this.s_val,
          sbbm: jlz.sbbm
        },
      }).then(response => {
        if (response.data.code !== 20000) {
          ElementUI.Message({
            message: response.data.message,
            type: 'warning'
          })
          return;
        }
        this.chart_option.dataset.source = response.data.data
        // console.log(response)
        // console.log(this.chart_option.dataset.source)
        //处理655.35值,将高于100mpa的值替换为'_'
        if (response.data.data === null)
          return;
        response.data.data.forEach(v => {
          if (v.yl > 100) {
            v.yl = '_'
          }
        })
        // myChart.setOption(this.chart_option);
        this.showChart(jlz)
      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })
      // console.log(option)
    }
  }
}
</script>

<style scoped>

</style>